<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="index.css" />
    <script src="vue.js"></script>
    <script src="elementui.js"></script>
    <script src="axios.js"></script>
    <script src="common.js"></script>
</head>
<body>
    <div id="app">
        <template>
            <el-button @click="add()" type="primary" style="margin-bottom: 20px;">新增角色</el-button>
            角色名称:<el-input v-model="input" placeholder="请输入角色名"></el-input>
            <el-button type="primary" @click="searchCar">查询</el-button>

            <el-table :data="tableData" border style='width: 100%'>
                
              <el-table-column prop="rolename" label="角色名称" width="400">
              </el-table-column>

              <el-table-column prop="description" label="描述" width="400">
            </el-table-column>

            <el-table-column fixed="right"  label="操作" width="400">
                <template slot-scope="scope">
                    <el-button @click="jscd(scope.$index, scope.row)" type="text" size="small">角色菜单</el-button>
                    <el-button @click="handleEdit(scope.$index, scope.row)" type="text" size="small">编辑</el-button>
                </template>
            </el-table-column>

            </el-table>

            <el-drawer title="角色菜单维护" :visible.sync="drawer" :with-header="true" >
               
                <el-button @click="qued()" type="text" size="small">确定修改</el-button>
                <el-tree @check="trchange" ref="tree" :check-strictly="true" :data="treedata" show-checkbox default-expand-all node-key="id"   highlight-current props="">
                </el-tree>
            
            </el-drawer>

            <el-dialog :title="dialogTitle" :visible.sync="showDialogFlag" width="30%">
              
                <el-form :model="currentMenu" label-width="80px">
                    <el-form-item label="角色名称">
                        <el-input v-model="currentMenu.rolename"></el-input>
                    </el-form-item>
                    <el-form-item label="描述">
                        <el-input v-model="currentMenu.description"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="showDialogFlag = false">取 消</el-button>
                    <el-button type="primary" @click="submitForm">确 定</el-button>
                </span>
            </el-dialog>

           <!-- 修改 -->
           <el-dialog :title="dialogTitle" :visible.sync="showDialogFlag1" width="30%">
              
            <el-form :model="currentMenu1" label-width="80px">
                <el-form-item label="角色名称">
                    <el-input v-model="currentMenu1.rolename"></el-input>
                </el-form-item>
                <el-form-item label="描述">
                    <el-input v-model="currentMenu1.description"></el-input>
                </el-form-item>
               
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="showDialogFlag1 = false">取 消</el-button>
                <el-button type="primary" @click="submitForm1">确 定</el-button>
            </span>
        </el-dialog>
        </template>
    </div>
</body>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            showDialogFlag: false,
            currentMenu: {
                id:'',
                rolename:'',
                description:''
            },
            dialogTitle: '',
            showDialogFlag1:false,
            currentMenu1: {
                id:'',
                rolename:'',
                description:''
            },
            nowroleid:0,//当前要修改的哪一行的角色id
            drawer: false,//控制抽屉显示隐藏
            input: '',
            tableData: [],
            treedata: [],
        },methods: {
            submitForm() {
               //发送请求
               axios.post(API+'addRole',this.currentMenu).then(res=>{
                    if(res.data.code==200){
                        alert("成功")
                        this.showDialogFlag=false;  
                        this.initTreeData();
                    }else{
                        alert("失败")
                    }
                })
            },
            submitForm1(){
                console.log(this.currentMenu1);
                
                axios.post(API+'updateRole',this.currentMenu1).then(res=>{
                    if(res.data.code==200){
                        alert("成功")
                        this.showDialogFlag1=false;
                        this.initTreeData();
                    }else{
                        alert("失败")
                    }
                })
            },
            trchange(a,b){
                let treeNowArr=this.$refs.tree.getCheckedKeys();//获取树当前选中的所有节点
                treeNowArr.push(a.parentid)//把当前节点的父id加入到树里面
                if(a.children!=null){
                const childIdArr=a.children.map(item=>item.id) // 将slist数组中的每个元素的menuid属性提取出来，生成一个新的数组arr
                treeNowArr=treeNowArr.filter(item=>!childIdArr.includes(item)) 
                }
                this.$refs.tree.setCheckedKeys(treeNowArr);
                console.log(treeNowArr);
                
            },
            qued() { //确定修改
                // console.log(this.$refs.tree.getCheckedKeys());
                let treeNowArr=this.$refs.tree.getCheckedKeys();
                axios.post(API+'updateRoleMenuId',{
                    roleid:this.nowroleid,
                    listMenu:treeNowArr
                }).then(res=>{
                    if(res.data.code==200){
                        alert("成功")
                        this.drawer = false;
                    }else{
                        alert("失败")
                    }
                })
            },
            jscd(i,row) { //角色菜单
                this.nowroleid=row.id;//设置当前要修改的哪一行的角色id
                this.initTreeData();
                axios.get(API+'selectRoleMenuByRoleId/'+row.id).then(res=>{
                   let slist=res.data.data.roleMenuList;
                   const arr=slist.map(item=>item.menuid) // 将slist数组中的每个元素的menuid属性提取出来，生成一个新的数组arr
                   this.$refs.tree.setCheckedKeys(arr); // 将arr数组中的元素设置为树形控件的选中状态
                })
               this.drawer = true;
               
            },handleEdit(index, row){//修改
                this.showDialogFlag1=true;
                this.currentMenu1 = Object.assign({}, row); // 复制当前行的数据
                this.dialogTitle='修改'
                
            },initTableData(){
                axios.get(API+'rolelist').then(res=>{
                    
                    this.tableData = res.data.data.rolelist
                })
            },searchCar(){
                
            },add(){
                this.dialogTitle='新增'
                this.showDialogFlag=true;
            },initTreeData(){
                axios.get(API+'menuList').then(res=>{
                    let s=arrayToTree(res.data);
                        this.treedata=s
                    })
            },
        },
        mounted() {
           this.initTableData();
        }
    })
</script>
</html>